<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 层叠性：多个选择器同时作用于一个标签*/
        /* 层叠性中，CSS能处理冲突 */
        /* id>class>标签 */
        /* 复杂选择器，通过个数计算权重 */
        /* （“#的个数”，“.的个数”，“标签的个数”） */
        /*提升某个选择的某条属性的权重：在属性后面加   !important （尽量不要用） */
        .c1{color:green;font-style:italic;}
        #id1{color:yellowgreen;text-decoration: underline;}
        p{color:red;}
        /* (2,0,1) */
        #box1 #box2 p{color: red;}
        /* (2,1,2) */
        #box1 div.box2 #box3 p{color:plum;}
        /* (0,3,1) */
        .box1 .box2 .box3 p{color: yellowgreen;}
    </style>
</head>
<body>
    <p id="id1" class="c1">11111</p>

    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p>11111</p>
            </div>
        </div>
    </div>
</body>
</html>